<template>
  <el-container>
    <el-header>
      <span class="fold_menu_text">{{ menuText }}</span>
      <div class="quit">
        <i class="iconfont icon-tuichu" @click="quit()"></i>
      </div>
    </el-header>
    <el-main>
      <router-view></router-view>
    </el-main>
    <el-footer style="height: 70px">
      <div class="bottom" @click="select('/')">
        <i class="el-icon-s-home"></i>
        <div>返回主页</div>
      </div>
      <div class="bottom" @click="select('myOrder')">
        <i
          class="el-icon-s-order"
          :class="{ myOrder: selectIcon === 'myOrder' }"
        ></i>
        <div>当前订单</div>
      </div>
      <div class="bottom addOrder" @click="select('callUp')">
        <div></div>
        <i class="el-icon-circle-plus"></i>
      </div>
      <div class="bottom" @click="select('orderList')">
        <i
          class="el-icon-s-claim"
          :class="{ orderList: selectIcon === 'orderList' }"
        ></i>
        <div>历史订单</div>
      </div>
      <div class="bottom" @click="select('updateUser')">
        <i
          class="el-icon-user-solid"
          :class="{ updateUser: selectIcon === 'updateUser' }"
        ></i>
        <div>个人资料</div>
      </div>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  methods: {
    quit() {
      window.localStorage.setItem('student-token', null)
      this.$router.push('/')
    },
    async select(index) {
      this.selectIcon = index
      switch (index) {
        case 'updateUser':
          this.menuText = '个人资料'
          break
        case 'callUp':
          this.menuText = '发起订单'
          break
        case 'myOrder':
          this.menuText = '当前订单'
          break
        case 'orderList':
          this.menuText = '历史订单'
          break
        default:
          break
      }
      this.$router.push(index)
    }
  },
  data() {
    return {
      selectIcon: 'myOrder',
      menuText: '当前订单'
    }
  }
}
</script>

<style lang="less" scoped>
.el-container {
  height: 100%;
  width: 100%;
}

.el-header {
  position: relative;
  background-image: linear-gradient(40deg, #4e43f9, #7c98fd);
  box-shadow: 0 5px 10px rgba(56, 56, 56, 0.397);
  z-index: 5;
  color: white;
  .fold_menu_text {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    left: 5%;
    font-size: 15px;
  }
}

.el-main {
  height: 100%;
  padding-bottom: 10px;
}

.el-footer {
  box-shadow: 0 -1px 5px rgba(119, 119, 119, 0.397);
}

.bottom {
  width: 19%;
  text-align: center;
  display: inline-block;
  // border: 1px solid red;
  font-size: 10px;
  color: rgb(129, 129, 129);
  i {
    font-size: 25px;
    margin-bottom: 5px;
  }
}

.myOrder {
  color: #409eff;
}

.orderList {
  color: #409eff;
}

.updateUser {
  color: #409eff;
}

.addOrder {
  width: 20%;
  position: relative;
  transform: translate(0, -50%);
  border-radius: 100%;
  z-index: 10;
  div {
    left: 50%;
    background-color: white;
    transform: translate(-50%, 0);
    top: 20%;
    height: 30px;
    width: 30px;
    position: absolute;
    z-index: -1;
  }
  i {
    font-size: 60px;
    color: #409eff;
  }
}

.quit {
  color: rgb(228, 100, 100);
  position: fixed;
  right: 10%;
  top: 1%;
  i {
    font-size: 40px;
  }
}
</style>
